<template>
  <div class="box">
    <div class="title">
      <label for="title">账单类型：</label>
      <!-- <input type="text"
             v-model="$store.state.node.title"> -->
      <van-dropdown-menu class="select">
        <van-dropdown-item v-model="$store.state.node.type"
                           :options="option1" />
      </van-dropdown-menu>
      <van-field readonly
                 class="price"
                 clickable
                 :value="$store.state.node.title"
                 type="number"
                 @touchstart.native.stop="show = true" />
      <van-number-keyboard v-model="$store.state.node.title"
                           :show="show"
                           theme="custom"
                           extra-key="."
                           close-button-text="完成"
                           @blur="show = false" />
    </div>

    <div class="dateNow">
      <label for="date">日期：{{$store.state.node.dateNow}}</label>
    </div>
    <div class="textMain">
      <div>摘要：</div>
      <textarea v-model="$store.state.node.text"></textarea>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      option1: [
        { text: '支出', value: 0 },
        { text: '收入', value: 1 },
      ],
      show: false,
    }
  },
  mounted () {
    this.$store.commit("setDate")
  }
}
</script>
<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
}
.title {
  padding: 10px 0;
  display: flex;
  align-items: center;
  .select {
    flex: 1;
  }
  .price {
    flex: 2;
    height: 25px;
    padding: 0 20px;
    margin: 0 10px;
  }
}
.dateNow {
  padding: 10px 0;
  display: flex;
  align-items: center;
}
.textMain {
  padding: 10px 0;
  flex: 8;
  display: flex;
  flex-direction: column;
  textarea {
    height: 100%;
  }
}
input,
textarea {
  font-size: 16px;
  background: #fff9;
  border: none;
}
</style>
<style lang="scss">
.van-dropdown-menu__bar {
  height: 25px;
}
</style>